<!--
 * @Description:收益金额
 -->
<template>
  <div>
    <div v-if="!islogin" class="loginArea">
      <van-button type="info" to="/login" block>登录</van-button>
    </div>
    <div v-else class="earnArea">
      <template v-if="earn === null">
        <div class="loading">
          <van-loading type="spinner" color="#007AFF" />
        </div>
      </template>
      <template v-else-if="earn === -1">
        <div class="error">
          <img src="../../../static/empty-image-error.png">
          <p>出错了～</p>
        </div>
      </template>
      <template v-else>
        <div class="myEarn">¥ {{earn}}</div>
        <van-button type="info" size="small" to="/recordEarn">查看收益记录</van-button>
      </template>
    </div>
    <div class="hotJobArea">
      <!-- HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。
      这意味着当你使用 DOM 中的模板时，
      camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名。
                      from -- cn.vuejs.org -->
      <job-area
        hot-title='热门任务'
        :banner-img='bannerSrc'
        :hot-job-list='hotJobList'
      ></job-area>
    </div>
  </div>
</template>

<script>
import { checkEarn, getTaskRecord } from '@/api/check'
import jobArea from '@/components/jobArea'
import { Toast } from 'vant'
export default {
  components: {
    'job-area': jobArea
  },
  data () {
    return {
      islogin: localStorage.getItem('TOKEN'),
      bannerSrc: require('@/assets/hotBanner.jpg'),
      earn: null,
      hotJobList: []
    }
  },
  created () {
    const $this = this
    const brandId = JSON.parse(localStorage.getItem('BRANDMSG')).brandId
    getTaskRecord(1, 50, brandId).then(res => {
      console.log('getTaskRecord', res)
      $this.hotJobList = res.data.data.list
    })
    if ($this.islogin) {
      checkEarn().then(res => {
        console.log('checkEarn', res)
        $this.earn = res.data.data
      }).catch(() => {
        Toast('收益查询失败')
        $this.earn = -1
      })
    }
  },
  methods: {

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .loginArea{
    width: 80%;
    margin: 20px auto;
  }
  .loginArea button{
    border-radius: 5px;
  }
  .earnArea{
    width: 95%;
    height: 200px;
    border-radius: 5px;
    background: #ffffff;
    margin: 15px auto;
    box-shadow: 0px 2px 3px #00000066;
    text-align: center;
    overflow: hidden;
  }
  .earnArea .loading{
    margin: 80px auto;
  }
  .earnArea .error{
    margin: 20px auto;
    text-align: center;
  }
  .earnArea .error img{
    widows: 120px;
    height: 120px;
  }
  .earnArea .error p{
    color: #969799;
    font-size: 14px;
    line-height: 20px;
  }
  .earnArea .myEarn{
    font-size: 36px;
    color: #101010;
    margin-top: 50px;
    font-weight: 500;
  }
  .earnArea button{
    margin-top: 30px;
    border-radius: 5px;
  }
</style>
